<template>
  <div class="flex flex-col page-box">
    <table-search
      @search-list="getList"
      @exportExcel="exportBasicInfo"
      :options="formItems"
      :form="form"
      class="search-box"
    />

    <div class="flex-1">
      <cvpTable
        :loading="loading"
        element-loading-text="努力获取邮件记录。。。"
        :data="list"
        :tableColoums="tableColoums"
      >
        <template #status="{ row }">
          <span
            :class="{
              'over-status': row.status.includes('未回复'),
              'wait-status': row.status.includes('已回复')
            }"
            >{{ row.status }}</span
          >
        </template>
        <template #email>
          <span>发送人<icon name="el-icon-caret-bottom" :size="12" color="#565B66"></icon></span>
        </template>
        <template #subject>
          <span>标题<icon name="el-icon-caret-bottom" :size="12" color="#565B66"></icon></span>
        </template>
        <template #date>
          <span>时间<icon name="el-icon-d-caret" :size="12" color="#565B66"></icon></span>
        </template>
        <template #index="{ $index }"
          ><span class="stop-icon"
            ><img src="@/assets/images/sending.png" class="sending" v-if="$index == 1" /></span
          >{{ ++$index }}</template
        >
        <template #handler="{ row }">
          <div class="flex">
            <designate class="flex-1"></designate>
            <recover class="flex-1" :item="row"></recover>
            <el-link class="flex-1" type="primary" :underline="false">关注</el-link>
          </div>
        </template>
      </cvpTable>
    </div>
  </div>
</template>
<script setup lang="ts">
import tableSearch from '@/components/tableSearch/index.vue'
import { formItems, tableColoums } from './index'
import cvpTable from '@/components/cvpTable/table.vue'
import recover from './components/recover.vue'
import designate from './components/designate.vue'
import { readExcelFile } from '@/utils/util'
const form = reactive({})
const loading = ref(true)
const list: any = ref([])
const addList: any = ref([])
const exportBasicInfo = () => {
  console.log('exportBasicInfo')
}
const getList = () => {
  console.log('get')
}
const transColumns = (data: any[][]): any[] => {
  return data.map((row) => ({
    id: row[0],
    email: row[1],
    subject: row[2],
    body: row[3],
    date: row[4],
    status: row[5],
    reply: row[6]
  }))
}
const loadExcelData = async () => {
  try {
    const data = await readExcelFile('gongdan.xlsx')
    data.shift()
    const excelList = data.filter((v) => v.length > 1)
    const arr = transColumns(excelList)
    addList.value = arr
    setTimeout(() => {
      list.value = arr
      loading.value = false
    }, 2000)
    // list.value = arr
  } catch (error) {
    console.error('Error loading Excel file:', error)
  }
}
loadExcelData()
</script>
<style lang="css" scoped>
.page-box {
  background: #ffffff;
  box-shadow: 0px 8px 20px 0px rgba(134, 154, 183, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
}
.over-status {
  color: #fca71a;
}
.wait-status {
  color: #10da4f;
}
:deep(.el-link__inner) {
  font-size: 12px;
}
.stop-icon {
  position: relative;
  top: 2px;
}
.sending {
  width: 16px;
  height: 16px;
  float: left;
}
</style>
